<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性与方法区别练习</title>
</head>
<body>
    <div id="app">
        {{message}}<br>
        {{ message.split('').reverse().join('') }}<br>
        {{reverseMessage}}<br>
        {{getReverseMessage()}}<br>
        {{reverseMessage}}<br>
        {{getReverseMessage()}}<br>
        {{reverseMessage}}<br>
        {{getReverseMessage()}}<br>
    </div> 

    <script src="./lib/vue.js"></script>

    <script>
      const vm = new Vue({
          el:'#app',
          data:{
              message:'我疯了吧，阿西吧'
          },
          computed:{//计算属性，基于响应式依赖进行缓存，只调用一次
              reverseMessage(){//简写
                 console.log('computed.......')
                /*表示message里面的内容，split('*')以一个特定的符号把字符串分割成数组，若是一个空字符串，表示把每个字符分隔开；reverse()反转，把一个数组颠倒过来；join()用传入的符号把数组拼接起来，若什么都不传，则默认为用“,”拼接  */
                 return this.message.split('').reverse().join('') 
              },
              //正规写法
              /* 
              reverseMessage：{
                  get(){
                 return this.message.split('').reverse().join('') 
                  }
              }
               */
          },
          methods:{//方法,没有缓存，每调用一次方法，都会重新执行方法主体内容
          getReverseMessage(){
              console.log('method.....')
           return this.message.split('').reverse().join('') 
          }

          }
      })
    
    
    
    </script>
</body>
</html>